<template>
  <div class="comp-look-history" v-loading="loading">
    <el-drawer :with-header="false" close-on-press-escape destroy-on-close size="50%" :modal="false" :visible.sync="isDrawer" :before-close="handleClose">
      <div class="drawer-container">
        <div class="header">
          <div class="title">浏览记录</div>
          <div @click="handleClose" class="close iconfont">&#xe673;</div>
        </div>
        <div class="search">
          <div class="block">
            <el-select filterable v-model="params.userIdList" collapse-tags multiple placeholder="请选择员工">
              <el-option v-for="item in userList" :key="item.userid" :label="item.userName" :value="item.userid"></el-option>
            </el-select>
          </div>
          <div class="block">
            <el-select v-model="params.operateType" placeholder="请选择操作类型">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="block">
            <el-date-picker v-model="dateValue" value-format="yyyy-MM-dd" @change="datePickerChange" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
          </div>
          <div class="block">
            <el-button @click="getTableData" type="primary">搜索</el-button>
          </div>
        </div>
        <div class="table">
          <el-table height="100%" :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="操作人"></el-table-column>
            <el-table-column prop="name" label="操作类型"></el-table-column>
            <el-table-column prop="address" label="操作时间"></el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.pageIndex" :page-sizes="[50, 100, 300, 400]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  props: {
    isDrawer: {
      type: Boolean,
      default: false
    },
  },
  watch: {
    isDrawer: {
      handler(newVal) {
        if (newVal) {
          this.params = {
            operateType: 0,
            queryBeginTime: '',
            queryEndTime: '',
            keyWord: '',
            pageIndex: 1,
            pageSize: 10,
            userIdList: []
          };
          this.getTableData();
        }
      }
    }
  },
  data() {
    return {
      userList: [], //用户
      options: [ //类型
        { label: '查看', value: 0 },
        { label: '下载', value: 1 },
      ],
      params: {
        operateType: 0,
        queryBeginTime: '',
        queryEndTime: '',
        keyWord: '',
        pageIndex: 1,
        pageSize: 10,
        userIdList: []
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      dateValue: [],

      total: 0,
      tableData: [],
      loading: false
    };
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      const { data } = await this.$api.documentManage.GetSelectUserInfo();
      this.userList = data.data;
    },
    datePickerChange(e) { //日期
      const [queryBeginTime, queryEndTime] = e;
      this.params = Object.assign({}, this.params, { queryBeginTime: queryBeginTime + ' 00:00:00', queryEndTime: queryEndTime + ' 23:59:59' });
    },
    handleSizeChange(val) { //分页
      this.params.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {//分页
      this.params.pageIndex = val;
      this.getTableData();
    },
    async getTableData() {
      this.loading = true;
      const { data } = await this.$api.documentManage.GetDocumentScanList(this.params).catch(() => {
        this.loading = false;
      });
      this.tableData = data.data?.items || [], this.total = data.data?.totalCount || 0, this.loading = false;
    },
    handleClose() {
      this.$emit('update:isDrawer', false);
    }
  }
};
</script>

<style lang="less" scoped>
.drawer-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    background: #f4f9fe;
    justify-content: space-between;
    .title {
    }
    .close {
      display: inline-block;
      font-size: 20px;
      cursor: pointer;
    }
  }
  .search {
    display: flex;
    align-items: center;
    margin: 15px 0;
    padding: 0 20px;
    .block {
      padding: 0 5px;
      &:nth-child(1) {
        padding-left: 0px;
      }
      &:nth-last-child(1) {
        padding-right: 0;
      }
    }
  }
  .table {
    padding: 0 20px;
    flex: 1;
  }
  .pagination {
    text-align: right;
    padding: 10px 20px;
  }
}
</style>
